<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1 {
				display: inline-block;
				position: relative;
				width: 1350px;
				height: 50px;
				text-align: center;
				margin-top: 80px;
				padding-top: 50px;
				overflow: hidden;
				clear: both;
			}
			
			#d2 {
				position: relative;
				bottom: -10px;
			}
			
			input[type="text"] {
				height: 30px;
				width: 280px;
				border: 1px solid #83D0FA;
			}
			
			input[type="submit"] {
				cursor: pointer;
				position: relative;
				top: 1px;
				width: 60px;
				height: 34px;
				background-color: #83D0FA;
				border: 1px solid #83D0FA;
			}
			
			#d3 {
				float: left;
				position: absolute;
				width: 1250px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<form action="https://www.baidu.com" method="get" id="d5">
			<div id="d1">
				<img src="baidu_web.png" id="d2" />
				<input type="text" name="shuru" /><input type="submit" name="shousuo" value="搜索" s />
			</div>
			<div id="d3" >
				<input type="radio" name="ss" value="baidu" checked="checked" onclick="fun1(this)"/><label>百度</label>
				<input type="radio" name="ss" value="guge" onclick="fun1(this)"/><label>谷歌</label>
				<input type="radio" name="ss" value="taobao"  onclick="fun1(this)"/><label>淘宝</label>
			</div>
		</form>
	</body>
	<script>
		function fun1(t){
			if(t.value=="baidu"){
						alert("百度");
						var ai=document.getElementById("d2");
						ai.setAttribute("src","baidu_web.png");
						var h=document.getElementById("d5");
						h.setAttribute("action","http://www.baidu.com");
					}
				else	if(t.value=="guge"){
						alert("谷歌");
						var ai=document.getElementById("d2");
						ai.setAttribute("src","google_web-444.png");
						var h=document.getElementById("d5");
						h.setAttribute("action","http://www.google.com");
					}
				else	if(t.value=="taobao"){
						alert("淘宝");
						var ai=document.getElementById("d2");
						ai.setAttribute("src","taobao_shopping-446.png");
						var h=document.getElementById("d5");
						h.setAttribute("action","http://www.taobao.com");

					}
					
		}
		function fun(){
			var al=document.getElementsByName("ss");
			for (var i = 0; i < al.length; i++) {
				if(al[i].checked){
					if(al[i].value=="baidu"){
						alert("百度");
						var ai=document.getElementById("d2");
						ai.setAttribute("src","baidu_web.png");
						var h=document.getElementById("d5");
						h.setAttribute("action","http://www.baidu.com");
					}
					if(al[i].value=="guge"){
						alert("谷歌");
						var ai=document.getElementById("d2");
						ai.setAttribute("src","google_web-444.png");
						var h=document.getElementById("d5");
						h.setAttribute("action","http://www.google.com");
					}
					if(al[i].value=="taobao"){
						alert("淘宝");
						var ai=document.getElementById("d2");
						ai.setAttribute("src","taobao_shopping-446.png");
						var h=document.getElementById("d5");
						h.setAttribute("action","http://www.taobao.com");
					}
				}
				
			}
			
		}
	</script>
</html>
